<template>
  <div style="width: 100%;">
    <t-form :data="formData" :rules="rules" ref="form" label-align="top">
      <t-form-item label="关联产品" name="relation_data">
        <div>
          <t-table
            rowKey="index"
            :data="formData.relation_data"
            :columns="columns"
            :stripe="stripe"
            :bordered="bordered"
            :hover="hover"
            :size="size"
            :table-layout="tableLayout ? 'auto' : 'fixed'"
            :showHeader="showHeader"
            cellEmptyContent="-"
            resizable
          >
            <template #thumb="{row}">
              <t-image-viewer :images="[row.thumb]" :closeOnEscKeydown="false">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                    <p class="prod-img">
                      <img alt="test" :src="row.thumb" />
                    </p>
                    <div class="tdesign-demo-image-viewer__ui-image--hover">
                      <span><browse-icon size="1.4em" /> 预览</span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </template>
            <template #day_rent="{row}">
              <p class="">￥{{ row.day_rent ? row.day_rent : '0.00' }}</p>
            </template>
            <template #status="{row}">
              <!-- -1 作废；0 下架；1 上架-->
              <t-tag v-if="row.status === 1" shape="round" variant="light" theme="success">上架</t-tag>
              <t-tag v-if="row.status === 0" shape="round" variant="light" theme="warning">下架</t-tag>
              <t-tag v-if="row.status === -1" shape="round" variant="light" theme="default">作废</t-tag>
            </template>
            <template #option="{row}">
              <t-space size="12px">
                <t-link theme="danger" class="opt-btn" variant="outline" @click="handleDelete(row)">删除</t-link>
              </t-space>
            </template>
          </t-table>

        </div>
      </t-form-item>
      <t-form-item>
        <t-button @click="$emit('addProduct')">添加产品</t-button>
      </t-form-item>
    </t-form>

  </div>
</template>

<script>
import ProductList from "@/components/product-list/index.vue";

export default {
  name: 'RelatedProducts',
  components: {ProductList},
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      // 日期 分类 账户 摘要 收入 支出 账户余额 记账人
      columns: [
        //{colKey: 'row-select', type: 'multiple', width: 50,},
        {colKey: 'id', title: 'ID', width: 70},
        {colKey: 'thumb', title: '产品图', align: 'center', width: 140,},
        {colKey: 'title', title: '名称', width: 240, ellipsis: true},
        //{colKey: 'classify_title', title: '分类', width: 140, ellipsis: true},
        //{colKey: 'brand_title', title: '品牌', width: 140, ellipsis: true},
        {colKey: 'day_rent', title: '日租价', width: 120},
        //{colKey: 'selling_price', title: '售卖价', width: 120},
        //{colKey: 'cash_pledge', title: '租赁押金', width: 140},
        //{colKey: 'stock_num', title: '库存', width: 90},
        {colKey: 'status', title: '状态', width: 90},
        //{colKey: 'sort', title: '排序', width: 100},
        {colKey: 'option', title: '操作', fixed: 'right', width: 80},
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 5,
        total: 1,
      },
      lists: [],
      formData: {
        relation_data: [], // 关联产品
      },
      rules: {
        //relation_data: [{required: true, message: '请选择关联产品', trigger: 'change'},],
      }
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      return  this.$refs.form.validate()
    },
    handleDelete(row) {
      this.formData.relation_data = this.formData.relation_data.filter(item => item !== row)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
